<template>
  <div class="w-full h-full flex bg-white">
    <!-- 图片名称展示位 -->
    <div class="w-1/5 h-full flex items-center justify-center pl-2">
      <img
        src="../../assets/icon_home_logo.png"
        style="width: 50px; height: 50px"
      />
      <n-gradient-text type="info" class="text-4xl ml-2 font-semibold"
        >智能粮库</n-gradient-text
      >
    </div>
    <!-- 按键 -->
    <div class="w-full h-full flex items-center justify-left bg-red-600"></div>
    <!-- 登录信息 -->
    <div class="w-1/5 h-full flex items-center justify-end pl-2 pr-4">
      <n-popover trigger="hover">
        <template #trigger>
          <div class="flex items-center hover-container select-none">
            <n-icon size="30" color="#c1c1c1">
              <PersonCircle />
            </n-icon>
            <h1 class="text-slate-500 pl-1 no-select">{{ localDataValue }}</h1>
            <n-icon size="21" color="#c1c1c1">
              <ChevronDown />
            </n-icon>
          </div>
        </template>
        <div class="flex flex-col gap-2">
          <n-button type="primary" @click="handleChangePassword">
            修改密码
          </n-button>
          <n-button strong secondary type="error" @click="confirmLogout">
            退出登录
          </n-button>
        </div>
      </n-popover>
    </div>
  </div>
  <!-- 修改密码 -->
  <change-password
    v-model:show="showChangePassword"
  ></change-password>
</template>

<script setup>
import { ref } from "vue";
import { PersonCircle, ChevronDown } from "@vicons/ionicons5";
import ChangePassword from "@/components/login/ChangePassword.vue";
import StorageService from "@/utils/dataStore";

/**
 * 获取本地存储数据
 */
const localDataValue = StorageService.localData.userName;

/**
 * 修改密码弹窗显示状态
 */
const showChangePassword = ref(false);


/**
 * 处理修改密码弹窗的显示状态更新
 */
const handlePasswordUpdateShow = (value) => {
    console.log("处理修改密码弹窗的显示状态更新" , value);
    
  showChangePassword.value = value;
};

/**
 * 处理修改密码按钮点击
 */
const handleChangePassword = () => {
  console.log("修改密码按钮被点击");
  showChangePassword.value = true;
};

/**
 * 确认退出登录
 */
const confirmLogout = () => {
  console.log("退出登录");
  // 这里应该是实际的退出登录逻辑
  setTimeout(() => {
    // 例如：清除token、跳转到登录页等
    // localStorage.removeItem('token');
    // router.push('/login');
  }, 1000);
};
</script>

<style scoped>
.hover-container:hover {
  cursor: pointer;
}

.no-select {
  user-select: none;
}
</style>
